<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 视口设置 移动端必备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乐购商城--首页</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="./lib(第三方库)/iconfont/iconfont.css">
    <link rel="stylesheet" href="./lib(第三方库)/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/common.css">
</head>

<body>
    <!-- 1.头部 -->
    <header class="header">
        <span class="iconfont icon-caidan"></span>
        <input type="search" placeholder="搜索您的宝贝" id="search-Jump">
        <a href="#">登陆</a>
    </header>
    <!-- 2.主体 -->
    <main class="main">
        <!-- banner部分 -->
        <div class="banner">
            <div class="swiper-container banner-slide">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="images/banner01.dpg"></div>
                    <div class="swiper-slide"><img src="images/banner02.dpg"></div>
                    <div class="swiper-slide"><img src="images/banner03.jpg"></div>
                    <div class="swiper-slide"><img src="images/banner04.dpg"></div>
                    <div class="swiper-slide"><img src="images/banner05.dpg"></div>
                    <div class="swiper-slide"><img src="images/banner06.dpg"></div>
                    <div class="swiper-slide"><img src="images/banner07.dpg"></div>
                    <div class="swiper-slide"><img src="images/banner08.dpg"></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!-- 内容轮播图 -->
        <div class="content-nav">
            <div class="swiper-container">
                <div class="swiper-wrapper ">
                    <div class="swiper-slide">
                        <ul class="content-lists">
                            <li>
                                <a href="#"><img src="images/nav-icon-01.webp" alt=""></a>
                                <p>乐购超市</p>
                            </li>
                            <li>
                                <a href="#"><img src="images/nav-icon-02.webp" alt=""></a>
                                <p>乐购超市</p>
                            </li>
                            <li>
                                <a href="#"><img src="images/nav-icon-03.webp" alt=""></a>
                                <p>乐购超市</p>
                            </li>
                            <li>
                                <a href="#"><img src="images/nav-icon-04.webp" alt=""></a>
                                <p>乐购超市</p>
                            </li>
                            <li>
                                <a href="#"><img src="images/nav-icon-05.webp" alt=""></a>
                                <p>乐购超市</p>
                            </li>
                            <li>
                                <a href="#"><img src="images/nav-icon-06.webp" alt=""></a>
                                <p>乐购超市</p>
                            </li>
                            <li>
                                <a href="#"><img src="images/nav-icon-07.webp" alt=""></a>
                                <p>乐购超市</p>
                            </li>
                            <li>
                                <a href="#"><img src="images/nav-icon-08.webp" alt=""></a>
                                <p>乐购超市</p>
                            </li>
                            <li>
                                <a href="#"><img src="images/nav-icon-09.webp" alt=""></a>
                                <p>乐购超市</p>
                            </li>
                            <li>
                                <a href="#"><img src="images/nav-icon-10.webp" alt=""></a>
                                <p>乐购超市</p>
                            </li>
                        </ul>
                    </div>
                    <div class="swiper-slide">
                        <ul class="content-lists">
                            <li>
                                <a href="#"><img src="images/nav-icon-11.webp" alt=""></a>
                                <p>乐购超市</p>
                            </li>
                            <li>
                                <a href="#"><img src="images/nav-icon-12.webp" alt=""></a>
                                <p>进口</p>
                            </li>
                            <li>
                                <a href="#"><img src="images/nav-icon-13.webp" alt=""></a>
                                <p>唯品会</p>
                            </li>
                            <li>
                                <a href="#"><img src="images/nav-icon-14.webp" alt=""></a>
                                <p>手机</p>
                            </li>
                            <li>
                                <a href="#"><img src="images/nav-icon-15.webp" alt=""></a>
                                <p>乐购超市</p>
                            </li>
                            <li>
                                <a href="#"><img src="images/nav-icon-16.webp" alt=""></a>
                                <p>乐购超市</p>
                            </li>
                            <li>
                                <a href="#"><img src="images/nav-icon-17.webp" alt=""></a>
                                <p>乐购超市</p>
                            </li>
                            <li>
                                <a href="#"><img src="images/nav-icon-18.webp" alt=""></a>
                                <p>乐购超市</p>
                            </li>
                            <li>
                                <a href="#"><img src="images/nav-icon-19.webp" alt=""></a>
                                <p>乐购超市</p>
                            </li>
                            <li>
                                <a href="#"><img src="images/nav-icon-20.webp" alt=""></a>
                                <p>乐购超市</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!-- 秒杀 -->
        <div class="sec-skill">
            <div>
                <div class="sec-skill-header">
                    <h1>乐购秒杀</h1>
                    <p>8点场</p>
                    <span>08:25:36</span>
                    <a href="#">更多秒杀
                        <span class="iconfont icon-youjiantou-tianchong"></span>
                    </a>
                </div>
                <div class="sec-skill-content">
                    <ul>
                        <li>
                            <a href="#"><img src="images/seckill-img01.dpg">
                                <span>￥1699</span>
                                <p>￥2599</p>
                            </a>
                        </li>
                        <li>
                            <a href="#"><img src="images/seckill-img02.dpg">
                                <span>￥3699</span>
                                <p>￥4599</p>
                            </a>
                        </li>
                        <li>
                            <a href="#"><img src="images/seckill-img03.dpg">
                                <span>￥5699</span>
                                <p>￥7599</p>
                            </a>
                        </li>
                        <li>
                            <a href="#"><img src="images/seckill-img04.dpg">
                                <span>￥99</span>
                                <p>￥199</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 新用户 -->
        <div class="new-user">
            <div>
                <a href="#"><img src="images/new-user01.dpg"></a>
                <a href="#"><img src="images/new-user02.dpg"></a>
            </div>
        </div>
        <!-- 每日逛 -->
        <div class="day-title">
            <div><img src="images/daily-shopping-title-img.dpg" alt=""></div>
        </div>
        <div class="day">
            <ul>
                <li>
                    <h3 class="h3-title01 font16 pink">兔息星球</h3>
                    <p>白条免息够</p>
                    <a href=" #"><img src="images/daily-shopping-img01.dpg" alt=""></a>
                </li>
                <li>
                    <h3 class="h3-title02 font16 green">每日特价</h3>
                    <p>9块9疯抢</p>
                    <a href="#"><img src="images/daily-shopping-img02.dpg" alt=""></a>
                </li>
                <li>
                    <h3 class="h3-title03 font16 pink">品牌闪购</h3>
                    <p>汇大牌好价</p>
                    <a href="#"><img src="images/daily-shopping-img03.dpg" alt=""></a>
                </li>
                <li>
                    <h3 class="h3-title04c font16 green">乐购直播</h3>
                    <p>好货即可买</p>
                    <a href="#"><img src="images/daily-shopping-img04.dpg" alt=""></a>
                </li>
                <li>
                    <h3 class="h3-title05 font16 pink">排行榜</h3>
                    <p>热销推荐</p>
                    <a href="#"><img src="images/daily-shopping-img05.dpg" alt=""></a>
                </li>
                <li>
                    <h3 class="h3-title06 font16 green">拍拍好物</h3>
                    <p>二手优品</p>
                    <a href="#"><img src="images/daily-shopping-img06.dpg" alt=""></a>
                </li>
                <li>
                    <h3 class="h3-title07 font16 pink">新品首发</h3>
                    <p>新品大赛</p>
                    <a href="#"><img src="images/daily-shopping-img07.dpg" alt=""></a>
                </li>
                <li>
                    <h3 class="h3-title08 font16 green">发现好货</h3>
                    <p>发现品质生活</p>
                    <a href="#"><img src="images/daily-shopping-img08.dpg" alt=""></a>
                </li>
            </ul>
        </div>
        <!-- 乐购新闻 -->
        <div class="news">
            <h3>乐购快报</h3>
            <div class="swiper-container news-title">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div>
                            <h2>HOT01</h2>
                            <span>纯javascript打造的滑动特效javascript打造的滑动特效纯javascript打造的滑动特效。</span>
                        </div>
                    </div>
                    <!-- <div class="swiper-slide">
                        <div>
                            <h2>HOT02</h2>
                            <span>纯javascript打造的滑动特效javascript打造的滑动特效纯javascript打造的滑动特效。</span>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div>
                            <h2>HOT03</h2>
                            <span>纯javascript打造的滑动特效javascript打造的滑动特效纯javascript打造的滑动特效。</span>
                        </div>
                    </div> -->
                </div>
            </div>
            <a href="#">|更多</a>
        </div>
        <!-- 商品推荐内容 -->
        <div class="items-title">
            <img src="images/recommend-title-img.png" alt="">
        </div>
        <div class="items-content">
            <ul>
                <li>
                    <a href="#"><img src="images/recommend-list-img01.webp"></a>
                    <p>[官方]CITIZEN西铁城旗舰店光动能绿色水鬼轻奢手表礼盒AW1598</p>
                    <span class="price">￥399</span>
                    <span class="similar">找相似</span>
                </li>
                <li>
                    <a href="#"><img src="images/recommend-list-img02.webp"></a>
                    <p>[官方]CITIZEN西铁城旗舰店光动能绿色水鬼轻奢手表礼盒AW1598</p>
                    <span class="price">￥399</span>
                    <span class="similar">找相似</span>
                </li>
                <li>
                    <a href="#"><img src="images/recommend-list-img03.webp"></a>
                    <p>[官方]CITIZEN西铁城旗舰店光动能绿色水鬼轻奢手表礼盒AW1598</p>
                    <span class="price">￥399</span>
                    <span class="similar">找相似</span>
                </li>
                <li>
                    <a href="#"><img src="images/recommend-list-img04.webp"></a>
                    <p>[官方]CITIZEN西铁城旗舰店光动能绿色水鬼轻奢手表礼盒AW1598</p>
                    <span class="price">￥399</span>
                    <span class="similar">找相似</span>
                </li>
                <li>
                    <a href="#"><img src="images/recommend-list-img05.webp"></a>
                    <p>[官方]CITIZEN西铁城旗舰店光动能绿色水鬼轻奢手表礼盒AW1598</p>
                    <span class="price">￥399</span>
                    <span class="similar">找相似</span>
                </li>
                <li>
                    <a href="#"><img src="images/recommend-list-img06.webp"></a>
                    <p>[官方]CITIZEN西铁城旗舰店光动能绿色水鬼轻奢手表礼盒AW1598</p>
                    <span class="price">￥399</span>
                    <span class="similar">找相似</span>
                </li>
            </ul>
        </div>
        <!-- 底线 bottom-line -->
        <div class="bottom-line">
            <div class="line"></div>
            <div class="text">我也是有底线的</div>
            <div class="line"></div>
        </div>
        <!-- 底部版权-->
        <div class="copyright">
            <div>
                <button>登陆</button>
                <button>注册</button>
                <button>手淘App</button>
                <button>用户反馈</button>
            </div>
        </div>

    </main>
    <!-- 3.尾部 -->
    <footer class="footer">
        <ul>
            <li>
                <a href="./index.html" class="active">
                    <span class="iconfont icon-ziyuan"></span>
                    <p>首页</p>
                </a>
            </li>
            <li>
                <a href="./sort.html">
                    <span class="iconfont icon-fenlei"></span>
                    <p>分类</p>
                </a>
            </li>
            <li>
                <a href="./car.html">
                    <span class="iconfont icon-gouwuche"></span>
                    <p>购物车</p>
                </a>
            </li>
            <li>
                <a href="./me.html">
                    <span class="iconfont icon-wode"></span>
                    <p>我的</p>
                </a>
            </li>
        </ul>
    </footer>
    <!-- 4.引入js -->
    <script src="./lib(第三方库)/swiper/js/swiper.min.js"></script>
    <script src="./lib(第三方库)/jquery/jquery.js"></script>
    <script src="js/common.js"></script>
    <script src="js/index.js"></script>
</body>

</html>